
<template>
  <div class="edit-down-table">
    <vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
      <template>
        <vxe-input class="edit-down-input" v-model="textValue" suffix-icon="fa fa-caret-down" @keyup="keyupEvent" @focus="clickEvent" @suffix-click="suffixClick" @blur="blurEvent"></vxe-input>
      </template>
      <template v-slot:dropdown>
        <div class="edit-down-wrapper">
          <vxe-grid
            highlight-hover-row
            highlight-current-row
            auto-resize
            height="auto"
            ref="grid"
            row-id="unit"
            :loading="loading"
            :pager-config="tablePage"
            :data="tableData"
            :columns="tableColumn"
            @cell-click="selectEvent"
            @page-change="pageChangeEvent">
          </vxe-grid>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script>
export default {
  name: 'MatrUnitDownTable',
  props: {
    params: Object,
    renderOpts: Object
  },
  data() {
    return {
      row: null,
      column: null,
      loading: false,
      textValue: '',
      currentMatrId: '',
      queryUrl: '/base/matrUnit/list',
      tableData: [], //最原始数据
      currentRow: {},
      tableColumn: [
        { type: 'seq', width: 50},
        { title: '包装单位', field: 'unit', width: 200, search: true },
        { title: '包装比率',  field: 'rate', width: 150, search: false },
        { title: '单价(元)',  field: 'price', search: false }
      ],
      tablePage: {
        border: true,
        autoHidden: true,
        currentPage: 1,
        pageSize: 20,
        pageSizes: [20, 50, 100, 200],
        total: 0,
        layouts: ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']
      }
    }
  },
  watch: {
    'row.matrId': {
      handler(newVal) {
        this.tablePage.currentPage = 1
        this.fetchData()
      },
      deep: true
    },
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      let that = this
      const {row, column } = this.params
      this.row = row
      this.column = column
      const { props = {} } = this.renderOpts
      if (!row || !row.matrId || !this.row[column.property]) {
        return
      }
      this.textValue = row[column.property]
      this.tableColumn = (props.tableColumn && props.tableColumn[column.property]) || this.tableColumn
      this.fetchData()
    },
    fetchData() {
      const { props = {} } = this.renderOpts
      if (this.strings.isBlank(this.row.matrId) || this.row.matrId == '0' || this.row.matrId == this.currentMatrId) {
        return
      }
      this.currentMatrId = this.row.matrId
      let wrapper = this.$newWrapper()
        .eq('matrId', this.row.matrId)
      let attr = props.dataview.$attrs
      if (attr.propFlagPurchase != undefined) wrapper.eq('flagPurchase', attr.propFlagPurchase)
      if (attr.propFlagBase != undefined) wrapper.eq('flagBase', attr.propFlagBase)
      if (attr.propFlagApply != undefined) wrapper.eq('flagApply', attr.propFlagApply)
      let params = {
        queryString: JSON.stringify(wrapper.queryConditions),
        currentPage: this.tablePage.currentPage,
        rowsPerPage: this.tablePage.pageSize,
      }
      this.$ajax.get(this.queryUrl, {params}).then(resp => {
        this.tableData = resp.data
        this.tablePage.total = this.tableData ? this.tableData.length : 0
        this.setCurrentRow()
      })
    },
    setCurrentRow() {
      if (this.row.packageUnit) {
        this.currentRow = this.tableData.find(item => item.id == this.row.packageUnit)
      } else if (this.tableData.length == 1) {
        this.currentRow = this.tableData[0]
      }
      if (this.currentRow) {
        this.$refs.grid.setCurrentRow(this.currentRow)
        this.$refs.grid.scrollToRow(this.currentRow)
        this.textValue = this.currentRow.unit
        this.selectEvent({row: this.currentRow})
      }
    },
    clickEvent() {
      this.fetchData()
      this.$refs.xDown.showPanel()
    },
    blurEvent() {
      if (this.currentRow) {
        this.row.packageUnit = this.currentRow.unit
      }
    },
    keyupEvent({ $event }) { // 根据输入筛选
      $event.stopPropagation()

      const { row, column } = this
      const { keyCode } = $event
      const cellValue = row[column.property]

      let grid = this.$refs.grid
      let selectedRow = grid.getCurrentRecord()
      let rowIndex = grid.getRowIndex(selectedRow)
      if (keyCode == 38) {
        if (rowIndex <= grid.data.length) {
          grid.setCurrentRow(grid.getData(rowIndex - 1))
          grid.scrollToRow(grid.getData(rowIndex - 1))
        }
      } else if (keyCode == 40) {
        if (rowIndex >= -1) {
          grid.setCurrentRow(grid.getData(rowIndex + 1))
          grid.scrollToRow(grid.getData(rowIndex + 1))
        }
      } else if (keyCode == 13) {
        let params = {
          row: selectedRow
        }
        this.selectEvent(params)
      }
    },
    suffixClick() {
      this.$refs.xDown.togglePanel()
    },
    pageChangeEvent({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.fetchData()
    },
    selectEvent(params) {
      const { renderOpts, row, column } = this
      const { props = {} } = renderOpts
      this.$set(column, 'selectRow', params.row)
      this.currentRow = params.row
      this.textValue = params.row.unit
      this.$set(row, column.property, params.row.unit)
      props.dataview.$emit('select-change', {row, column})
      this.$refs.xDown.hidePanel()
    }
  }
}
</script>

<style lang="scss" >
  .vxe-pulldown--panel {
    z-index: 1000000 !important;
  }

  .edit-down-pulldown {
    width: 100%;
  }
  .edit-down-wrapper {
    width: 40vw;
    height: 300px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  }
</style>
